<template>
  <a-layout-sider width="200"
                  style="background: #fff">
    <a-menu v-model:selectedKeys="selectedKeys"
            v-model:openKeys="openKeys"
            mode="inline"
            :style="{ height: '100%', borderRight: 0 }"
            @click="clickMenu">
      <a-sub-menu key="sub1">
        <template #title>
          <span>
            <user-outlined />
            菜单1
          </span>
        </template>
        <a-menu-item key="home">Home</a-menu-item>
        <a-menu-item key="about">About</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <template #title>
          <span>
            <laptop-outlined />
            菜单2
          </span>
        </template>
        <a-menu-item key="5">option5</a-menu-item>
        <a-menu-item key="6">option6</a-menu-item>
        <a-menu-item key="7">option7</a-menu-item>
        <a-menu-item key="8">option8</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>
<script setup lang='ts'>
import { ref } from "vue";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const selectedKeys = ref<string[]>(["1"]);
const openKeys = ref<string[]>(["sub1"]);

const clickMenu = ({ item, key, keyPath }) => {
  console.log(item, key, keyPath);
  router.push(`/${key}`);
};
</script>